<div class="layui-fluid layui-anim febs-anim" id="febs-apex" lay-title="评价结果分析">
    <div class="layui-row layui-col-space8 febs-container">
        <form class="layui-form layui-table-form" lay-filter="user-table-form">
        <div class="layui-col-md10">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="evaluateDate" id="evaluateDate" class="layui-input">
                    </div>
                    <label class="layui-form-label layui-form-label-sm">来源</label>
                    <div class="layui-input-inline">
                        <select name="evaluateSource">
                            <option value=""></option>
                            <option></option>
                            <option value="wechat">微信小程序</option>
                            <option value="alipay">支付宝小程序</option>
                            <option value="ipad">现场评价</option>
                            <option value="touch_screen">触摸屏</option>
                            <option value="message">短信</option>
                        </select>
                    </div>
                    <label class="layui-form-label layui-form-label-sm">事项</label>
                    <div class="layui-input-inline">
                        <select name="queueName">
                            <option value=""></option>
                            <option th:each="queue,queueStat:${queueList}" th:value="${queue}" th:text="${queue}"></option>
                        </select>
                    </div>
                    <label class="layui-form-label layui-form-label-sm">部门</label>
                    <div class="layui-input-inline">
                        <select name="department">
                            <option value=""></option>
                            <option th:each="department,departmentStat:${departmentList}" th:value="${department}" th:text="${department}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        </form>
        <div class="layui-col-md2 layui-col-sm12 layui-col-xs12 table-action-area">
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" id="query">
                <i class="layui-icon">&#xe848;</i>
            </div>
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" id="reset">
                <i class="layui-icon">&#xe79b;</i>
            </div>
            <!--<div class="layui-btn layui-btn-sm layui-btn-primary table-action action-more"
                 shiro:hasAnyPermissions="user:add,user:update,user:password:reset,user:export">
                <i class="layui-icon">&#xe875;</i>
            </div>-->
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">好差评</div>
                <div class="layui-card-body">
                    <div id="e_by_value_div"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">事项分类</div>
                <div class="layui-card-body">
                    <div id="e_by_item_div"></div>
                </div>
            </div>
        </div>
        <!--<div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">带负值面积图</div>
                <div class="layui-card-body">
                    <div id="negativeAreaChart"></div>
                </div>
            </div>
        </div>-->
        <!--
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">层叠面积图</div>
                <div class="layui-card-body">
                    <div id="stackedAreaChart"></div>
                </div>
            </div>
        </div>-->
        <!--<div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">不规则时间序列面积图</div>
                <div class="layui-card-body">
                    <div id="irregularTimeseriesAreaChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">非连续性面积图</div>
                <div class="layui-card-body">
                    <div id="nullValuesAreaChart"></div>
                </div>
            </div>
        </div>-->
    </div>
</div>
<script data-th-src="@{febs/lay/data/dataSeries.js}"></script>
<script data-th-inline="javascript" type="text/javascript">
    layui.use(['apexcharts','dropdown', 'jquery', 'laydate', 'form', 'table', 'febs', 'treeSelect'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            $view = $('#febs-apex'),
            $searchForm = $view.find('form'),
            $query = $view.find('#query'),
            $reset = $view.find('#reset');

        form.render();
        $query.on('click', function () {
            var params = $.extend(getQueryParams());
            console.info(params);
            init_value_option()

        });
        init_value_option();
        $reset.on('click', function () {
            $searchForm[0].reset();

        });
        laydate.render({
            elem: '#evaluateDate',
            range: true,
            trigger: 'click'
        });

        function getQueryParams() {
            var evaluateDateFrom,
                evaluateDateTo,
                evaluateDate = $searchForm.find('input[name="evaluateDate"]').val();
            if (evaluateDate) {
                evaluateDateFrom = evaluateDate.split(' - ')[0]+' 00:00:00';
                evaluateDateTo = evaluateDate.split(' - ')[1]+' 23:59:59';
            }
            return {
                queueName:$searchForm.find('select[name="queueName"]').val(),
                department:$searchForm.find('select[name="department"]').val(),
                evaluateSource:$searchForm.find("select[name='evaluateSource']").val(),
                evaluateDateFrom: evaluateDateFrom,
                evaluateDateTo: evaluateDateTo,
                invalidate_ie_cache: new Date()
            };
        }

        function init_value_option(){
            $.ajax({
                url: ctx + 'febs/views/evaluateRecord/chatDataByValue',
                data:getQueryParams(),
                dataType:"json",
                success:function(data){
                    var option_value = {
                        chart: {
                            width: 700,
                            type: 'pie',
                            toolbar: {
                                show: true,
                                tools: {
                                    download: true,
                                },
                                autoSelected: 'zoom'
                            },
                        },
                        labels: data.name,
                        series: data.value,
                        responsive: [{
                            breakpoint: 480,
                            options: {
                                chart: {
                                    width: 200
                                },
                                legend: {
                                    position: 'bottom'
                                }
                            }
                        }]
                    }
                    var chart_value = new ApexCharts(
                        document.querySelector("#e_by_value_div"),
                        option_value
                    );

                    chart_value.render();
                }
            });
        }
    });
</script>